<template>
    <page-view class="home-page">
        <div class="content-box">
            <!-- 在二级路由添加keep-alive，这样tabBar上面的页面不会被销毁掉 -->
            <router-view #default="{ Component }">
                <keep-alive>
                    <component :is="Component"></component>
                </keep-alive>
            </router-view>
        </div>
        <ul class="tab-bar">
            <router-link :to="{ name: 'ChooseFood' }" custom #default="{ navigate, isActive }">
                <li @click="navigate" :class="{ selected: isActive }">
                    <span class="iconfont icon-dropbox"></span>
                    点餐
                </li>
            </router-link>
            <router-link :to="{ name: 'Order' }" custom #default="{ navigate, isActive }">
                <li @click="navigate" :class="{ selected: isActive }">
                    <span class="iconfont icon-layout-fill"></span>
                    订单
                </li>
            </router-link>
            <router-link :to="{ name: 'Category' }" custom #default="{ navigate, isActive }">
                <li @click="navigate" :class="{ selected: isActive }">
                    <span class="iconfont icon-tag-fill"></span>
                    分类
                </li>
            </router-link>
            <router-link :to="{ name: 'My' }" custom #default="{ navigate, isActive }">
                <li @click="navigate" :class="{ selected: isActive }">
                    <span class="iconfont icon-user"></span>
                    我的
                </li>
            </router-link>
        </ul>
    </page-view>
</template>

<script>
export default {
    name: "Home"
}
</script>

<style lang="scss" scoped>
// 没有url不会通过url-loader处理
@import "../assets/scss/comm.scss";

.home-page {
    display: flex;
    flex-direction: column;
}

.content-box {
    flex: 1;
    overflow: auto;
}

.tab-bar {
    height: 55px;
    border-top: 1px solid lightgray;
    box-sizing: border-box;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;

    >li {
        width: 55px;
        height: 100%;
        box-sizing: border-box;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &.selected {
            color: $primaryColor;
            font-weight: bold;
        }

        .iconfot {
            font-size: 22px;
        }
    }
}
</style>